﻿@model FollowPeers.Models.UserProfile
@using FollowPeers.Models;
@Html.Partial("_Header")
@{
    ViewBag.Title = "Tier your followers";
    FollowPeersDBEntities followPeersDB = new FollowPeersDBEntities();
    
    string name = Membership.GetUser().UserName;
    UserProfile myprofile = followPeersDB.UserProfiles.SingleOrDefault(p => p.UserName == name);
    IQueryable<string> Tier1 = from cust in followPeersDB.Relationships where (cust.personBName == name && cust.tier == 1) select cust.personAName;

    IQueryable<string> Tier2 = from cust in followPeersDB.Relationships where (cust.personBName == name && cust.tier == 2) select cust.personAName;

    IQueryable<string> Tier3 = from cust in followPeersDB.Relationships where (cust.personBName == name && cust.tier == 3) select cust.personAName;

    }
    <script type="text/javascript" src="@Url.Content("../../jquery.ui.draggable.js")"></script>
	<script src="@Url.Content("../Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("../Scripts/jquery-ui.js")" type="text/javascript"></script>        
    <div class="container" id="main">
    <div class="row">
    @Html.Partial("_SideBar3")
    <div style="overflow:auto; margin-left:10px" id="span9">
    <div style="color:#888">Drag the person and drop at the preferred tier.</div>
        <div style="width: 99.6%;float: left;background: #0000FF;padding: 5px;margin-top: 5px;">
        <div style="float:left;background: #0000FF;padding: 5px;width: 605px;color: white;font-size: 12px;font-weight: bold;">Tier 1 (Unknown)</div>
        </div>

       <div id="Tier1Container" class="droppable ui-widget-header" style="height:105px;border:1px dashed #888;margin-top:50px;">
       @foreach (string person in Tier1)
       {
           UserProfile tempprofile = followPeersDB.UserProfiles.SingleOrDefault(p => p.UserName == person);

           <div id="@tempprofile.UserName" style="width: 75px; text-align: center; cursor: move; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: left; position: relative; " class="draggable">
           <div id="demo" style="height:70px;overflow:hidden;">
           <img src="@tempprofile.PhotoUrl" alt="" style="margin-left:auto; margin-right:auto; width:70px;"></div>
           <div style="cursor: pointer;" onclick="location.href='/Profile/Index/@tempprofile.UserProfileId'">@tempprofile.FirstName</div>
           </div>
       }
       </div>
    
       <div style="width: 99.6%;float: left;background: #0000FF;padding: 5px;margin-top: 5px;">
       <div style="float:left;background: #0000FF;padding: 5px;width: 605px;color: white;font-size: 12px;font-weight: bold;">Tier 2 (Acquaintances)</div>
       </div>
       <div id="Tier2Container" class="droppable ui-widget-header" style="height:105px;border:1px dashed #888;margin-top:50px;">
       @foreach (string person in Tier2)
       {
           UserProfile tempprofile = followPeersDB.UserProfiles.SingleOrDefault(p => p.UserName == person);

           <div id="@tempprofile.UserName" style="width: 75px; text-align: center; cursor: move; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: left; position: relative; " class="draggable ui-widget-content">
           <div id="demo" style="height:70px;overflow:hidden;">
           <img src="@tempprofile.PhotoUrl" alt="" style="margin-left:auto; margin-right:auto; width:70px;"></div>
           <div style="cursor: pointer;" onclick="location.href='/Profile/Index/@tempprofile.UserProfileId'">@tempprofile.FirstName</div>
           </div>
       }
       </div>
    
       <div style="width: 99.6%;float: left;background: #0000FF;padding: 5px;margin-top: 5px;">
       <div style="float:left;background: #0000FF;padding: 5px;width: 605px;color: white;font-size: 12px;font-weight: bold;">Tier 3 (Close Friends)</div>
       </div>
       <div id="Tier3Container" class="droppable ui-widget-header" style="height:105px;border:1px dashed #888;margin-top:50px;">
       @foreach (string person in Tier3)
       {
           UserProfile tempprofile = followPeersDB.UserProfiles.SingleOrDefault(p => p.UserName == person);

           <div id="@tempprofile.UserName" style="width: 75px; text-align: center; cursor: move; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: left; position: relative; " class="draggable ui-draggable">
           <div id="demo" style="height:70px;overflow:hidden;">
           <img src="@tempprofile.PhotoUrl" alt="" style="margin-left:auto; margin-right:auto; width:70px;"></div>
           <div style="cursor: pointer;" onclick="location.href='/Profile/Index/@tempprofile.UserProfileId'">@tempprofile.FirstName</div>
           </div>
       }
       </div>   
       </div>
</div>
</div>

@Html.Partial("_Footer")

<script type="text/javascript">

    $(document).ready(function () {

        $(".draggable").draggable();

        $(".droppable").droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {

                var targetElem = $(this).attr("id");
                if (targetElem == "Tier1Container") targetElem = "1";
                else if (targetElem == "Tier2Container") targetElem = "2";
                else if (targetElem == "Tier3Container") targetElem = "3";
                $(this)
					.addClass("ui-state-highlight")
					.find("p")
						.html("Dropped! inside " + targetElem);
                window.location.href = "../Profile/ChangeTier?id=" + ui.draggable.attr('id') + "&tier=" + targetElem;
            }
        });

    });
    </script>